<template>
  <div class="content row_between">
    <div class="content-left row_start">
      <uni-icons
        class=""
        type="back"
        :size="iconSize"
        @click="navTo"
      ></uni-icons>
      <div class="content-left-input" @click="searchPage">
        <uni-icons class="icon" type="search" size="18"></uni-icons>
        <span class="icon_span">请输入商品名称</span>
      </div>
    </div>
    <uni-icons
      class=""
      :type="collectState == 2 ? 'star' : 'star-filled'"
      :size="iconSize"
      @click="collect"
    ></uni-icons>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
export default {
  computed: {
    ...mapState(["companyInfo"]),
  },
  props: {
    status: {
      type: Number,
      default: 2,
    },
    from: {
      type: String,
      default: null,
    },
    company_id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      iconSize: 18,
      collectState: this.status,
    };
  },
  methods: {
    searchPage() {
      uni.navigateTo({
        url: `/pages/index/search?from=${this.from}&zid=${this.zid}&company_id=${this.company_id}`,
      });
    },
    // 收藏功能
    collect() {
      $https(
        "POST",
        `setTopCompany?company_id=${this.companyInfo.supplier_id}`,
        {},
        (res) => {
          if (res.data.errcode == 0) {
            this.collectState = this.collectState == 1 ? 2 : 1;
            console.log(this.collectState,'collectState');
            uni.showToast({
              title: `${res.data.data}`,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: `${res.data.data}`,
              icon: "none",
            });
          }
        }
      );
    },
    // 返回
    navTo() {
      uni.reLaunch({
        url: "/pages/tabar/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.status_bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bgColor) !important;
  height: var(--status-bar-height);
  z-index: 1000;
}

.content {
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 40rpx !important;
  border-bottom: 1rpx solid #e1e1e1;
  position: sticky;
  top: var(--status-bar-height);
  z-index: 99;

  &-left {
    align-items: center;

    &-input {
      width: 500rpx;
      height: 60rpx;
      background-color: #f6f6f6;
      border-radius: 45rpx;
      margin-left: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 20rpx;

      .icon {
        height: 100rpx;
        width: 36rpx;
        overflow: unset !important;
      }

      .icon_span {
        font-size: 28rpx;
        margin-left: 20rpx;
        color: #ccc;
      }
    }
  }

  .uniui-search {
    color: #ccc !important;
  }

  .uniui-star-filled {
    color: #12a38c !important;
  }
}
</style>